import NProgress from 'nprogress'
import { createRouter, createWebHistory } from 'vue-router'
import 'nprogress/nprogress.css'
import NotFoundPage from '@/views/404.vue'
import Index from '@/views/layout/Index.vue'

const router = createRouter({
	history: createWebHistory(import.meta.env.BASE_URL),
	routes: [
		{
			path: '/',
			name: 'Index',
			component: Index,
			children: [
				{
					path: '/home',
					component: () => import('@/views/Home.vue'),
					meta: {
						active: 'home',
						keepAlive: true,
						pageHeader: {
							back: true,
							title: 'UseTable',
							subTitle: 'useTable是利用vue3 hooks封装的一个很厉害的表格数据通用函数',
							crumb: [
								{
									label: '首页'
								},
								{
									label: 'Unocss',
									path: '/about'
								},
								{
									label: 'STable',
									path: '/sTable'
								}
							]
						}
					}
				},
				{
					path: '/about',
					name: 'About',
					component: () => import('@/views/Unocss.vue'),
					meta: {
						active: 'about',
						keepAlive: false,
						pageHeader: {
							title: 'UNOCSS',
							subTitle:
								'UnoCSS 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎，受 Windi CSS、Tailwind CSS、Twind 的启发',
							crumb: [
								{
									label: '第二页'
								},
								{
									label: 'UNOCSS',
									path: '/about'
								}
							]
						}
					}
				},
				{
					path: '/tree',
					component: () => import('@/views/tree/demo.vue'),
					meta: {
						active: 'tree'
					}
				},
				{
					path: '/form',
					component: () => import('@/views/Form.vue'),
					meta: {
						active: 'form',
						pageHeader: {
							title: '一个封装的炒鸡好用的Form'
						}
					}
				},
				{
					path: '/form-table',
					component: () => import('@/views/FormTable.vue'),
					meta: {
						active: 'formTable',
						pageHeader: {
							title: '一个表单里面嵌套表格校验的示例'
						}
					}
				},
				{
					path: '/el-table',
					component: () => import('@/views/ElementTable.vue'),
					meta: {
						active: 'el-table',
						pageHeader: {
							title: 'ElTable',
							subTitle: '封装element-plus的table和分页，然后还加了useElTable处理表格数据分页事件等'
						}
					}
				},
				{
					path: '/checkbox',
					component: () => import('@/views/checkbox/demo.vue'),
					meta: {
						active: 'checkbox'
					}
				},
				{
					path: '/stable',
					component: () => import('@/views/STable.vue'),
					meta: {
						active: 'stable',
						keepAlive: false,
						pageHeader: {
							title: 'STable',
							subTitle: '这是一个很牛逼适配antv的虚拟表格table'
						}
					}
				},
				{
					path: '/wangEditor',
					component: () => import('@/views/WangEditor.vue'),
					meta: {
						keepAlive: false,
						active: 'wangEditor'
					}
				},
				{
					path: '/echart',
					component: () => import('@/views/Echart.vue'),
					meta: {
						active: 'echart'
					}
				}
			]
		},
		{
			path: '/login',
			name: 'Login',
			component: () => import('@/views/login.vue')
		},
		{
			path: '/:pathMatch(.*)*',
			name: '404',
			component: NotFoundPage
		}
	]
})

NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
	NProgress.start()
	next()
})
router.afterEach(() => {
	NProgress.done()
})

export default router
